<template>
  <div class="accepted-questions">
    <h3>已通过的题目 ({{ total }} 题)</h3>

    <el-table
        :data="acceptedQuestionsList"
        v-loading="loading"
        style="width: 100%"
        class="question-table"
    >
      <el-table-column prop="id" label="ID" width="100" />

      <el-table-column label="题目名称">
        <template #default="scope">
          <el-link type="primary" @click="goToQuestion(scope.row.id)">
            {{ scope.row.title }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column prop="arithmeticRating" label="算法评分" width="120">
        <template #default="scope">
          <el-tag :type="getRatingTagType(scope.row.arithmeticRating)" size="small">
            {{ scope.row.arithmeticRating }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, sizes"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50, 100]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
// 💎 新增：导入你的API服务和类型
import { QuestionControllerService, type QuestionQueryRequest, type QuestionVO } from "../../../generated";

const router = useRouter();

// ⭐️ 状态：分页和加载
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(30); // 默认每页30条
const total = ref(0);
// 💎 修改：更新列表的数据类型为 QuestionVO[]
const acceptedQuestionsList = ref<QuestionVO[]>([]);

// 💎 新增：根据算法评分返回不同的标签类型
const getRatingTagType = (rating?: string) => {
  if (!rating) return 'info';
  switch (rating) {
    case '简单':
      return 'success'; // 绿色
    case '中等':
      return 'warning'; // 黄色
    case '困难':
      return 'danger';  // 红色
    default:
      return 'info';    // 灰色
  }
};
// ⭐️ 核心函数：加载数据（已替换为真实API调用）
const loadAcceptedQuestions = async () => {
  loading.value = true;
  try {
    // 构造请求参数
    const requestBody: QuestionQueryRequest = {
      current: currentPage.value,
      pageSize: pageSize.value,
    };
    // 调用后端接口
    const res = await QuestionControllerService.listQuestionVoMyAcByPage(requestBody);

    // 判断请求是否成功
    if (res.code === 0) {
      // 💎 修改：从真实的响应中获取数据
      acceptedQuestionsList.value = res.data?.records || [];
      total.value = Number(res.data?.total) || 0;
    } else {
      // 如果业务码不为0，显示后端返回的错误信息
      ElMessage.error('加载失败：' + res.message);
    }
  } catch (error: any) {
    // 处理网络或其他异常
    ElMessage.error('加载通过题目列表失败，请检查网络');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// ⭐️ 事件：页码变化
const handlePageChange = (page: number) => {
  currentPage.value = page;
  loadAcceptedQuestions();
};

// ⭐️ 事件：每页条数变化
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1; // 切换每页大小后，重置到第一页
  loadAcceptedQuestions();
}

// 点击题目跳转到题目详情页
const goToQuestion = (questionId?: number) => {
  if (!questionId) {
    ElMessage.warning('题目ID无效');
    return;
  }
  router.push(`/questions/detail/${questionId}`);
};

// 💎 移除：不再需要 getDifficultyTag 函数

// 组件挂载时首次加载数据
onMounted(() => {
  loadAcceptedQuestions();
});
</script>

<style scoped>
.accepted-questions {
  padding: 20px;
}

.question-table {
  margin-top: 15px;
  --el-table-border-color: #f0f0f0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end; /* 分页器靠右对齐 */
}
</style>